//MANUAL
//Faça os passo abaixo na página que se quer usar o google maps
//1. Chame os arquivos javascript do google maps e esse arquivo
//	<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
//	<script type="text/javascript" src="<?=$url;?>/js/googlemaps.js"></script>
//2.Coloque uma div com id=map_canvas onde se localizará o mapa
//	<div id="map_canvas"></div>
//3.Estilize tamanho, margin e padding para a div map_canvas conforme layout
//4.Troque a Latitudo e Longitude na varível cliente contida nesse arquivo
//5.Se tiver formulário que traça rota:
//	5.1 - Coloque no action do formulário javascript:calcRoute();
//		<form action="javascript:calcRoute();">
//	5.2 - O input no qual será digitado o local, deverá se chamar endereço
//		<input name="endereco" />
//7.Se quizer personalizar o ícone
//	7.1 - Desomente a sessão ÍCONES/personalizado
//	7.2 - Coloque o endereço da imagem na variável image da sessão de ÍCONE
//	7.3 - Comente a sessão ICONES/padrão
//

var directionsDisplay;
var cliente = new google.maps.LatLng(-30.055453,-51.188504);
var directionsService = new google.maps.DirectionsService();
var map;

//FUNÇÃO INICIAL
function initialize() {
	directionsDisplay = new google.maps.DirectionsRenderer();
	var myOptions = {
		zoom: 16,
		center: cliente,
		disableDefaultUI: true,
		panControl: true,
		panControlOptions: {
			position: google.maps.ControlPosition.TOP_RIGHT
		},
		
		zoomControl: true,
		zoomControlOptions: {
			style: google.maps.ZoomControlStyle.SMALL						//SMALL,LARGE,DEFAUT
		},
		
		mapTypeControl: false,
		mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		},
		
		scaleControl: false,
		streetViewControl: true,
		overviewMapControl: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
	directionsDisplay.setMap(map);
	//FIM DA FUNÇÃO INICIAL
	
	//ÍCONES
	//padrão
	var marker = new google.maps.Marker({
		position: cliente, 
		map: map, 
		title:"Digital Cities"
	});
	
	//personalizado
	/*var image = 'http://www.mobiinternet.com.br/system/imagens/setamapa.png';
	var beachMarker = new google.maps.Marker({
		position: cliente,
		map: map,
		icon: image
	});*/
	//FIM DE ÍCONES
	
	//JANELA DE INFORMAÇÕES
	/*var contentString = '<div id="content">'+
							'<p>MABRAM TROFEUS</p>'+
						'</div>';
	var infowindow = new google.maps.InfoWindow({
		content: contentString,
		maxWidth : 50
	});
	google.maps.event.addListener(marker, 'click', function() {
		infowindow.open(map,marker);
	});*/
	//FIM DA JANELA DE INFORMAÇÕES
}
//FIM DE FUNÇÃO INICIAL

//FUNÇÃO QUE TRAÇA ROTA
function calcRoute() {
	var start = $('input[name=endereco]').val();
	var end = cliente;

	var request = {
		origin:start,
		destination:end,
		travelMode: google.maps.TravelMode.DRIVING						//DRIVING,WALKING,BICYCLING
	};
	directionsService.route(request, function(result, status) {
		if (status == google.maps.DirectionsStatus.OK) {
			 directionsDisplay.setDirections(result);
		}
	});
}

$(document).ready(function(){
	initialize();
});

